<template>
  <div class="box">
    <div class="box_one">
      <div class="box_list">1</div>
      <div class="box_content">
        <div class="early_title">施工单位选取方式</div>
        <div class="early_select">
          <span>选取方式</span>
          <el-select v-model="value" placeholder="--请选择--" @change="changeValue">
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <div class="early_select" v-show="flag1">
          <span>招标文件</span>
          <div class="upLoadImg">
            <upload
              ref="hetongBox1"
              @beforeUpload="beforeUpload"
              @res="getRes($event,1)"
              :accept="'.pdf'"
            />
          </div>
        </div>
        <div class="early_select" v-show="flag2">
          <span>采购文件</span>
          <div class="upLoadImg">
            <upload
              ref="hetongBox2"
              @beforeUpload="beforeUpload"
              @res="getRes($event,2)"
              :accept="'.pdf'"
            />
          </div>
        </div>
        <div class="early_select" v-show="flag3">
          <span>抽取报告</span>
          <div class="upLoadImg">
            <upload
              ref="hetongBox3"
              @beforeUpload="beforeUpload"
              @res="getRes($event,3)"
              :accept="'.pdf'"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">2</div>
      <div class="box_content">
        <div class="early_title">施工单位名称</div>
        <!-- <div class="early_select">
          <span>单位是否已在诚信管理系统注册</span>
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </div> -->
        <div class="early_select early_selectTwo">
          <span>机构名称：</span>
            <el-select
              v-model="companyValue"
              @change="changeCompany"
              filterable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          
        </div>
        <!--<div class="early_select early_selectTwo">
           <div v-if="isFlag1"> 
          <div >
            <span>机构名称：</span>
            <el-select
              v-model="companyValue"
              @change="changeCompany"
              filterable
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
           <div v-if="isFlag2" class="lineBlo">
            <span>机构名称：</span>
            <el-input v-model="inputCompany" placeholder="请输入"></el-input>
          </div> 
        </div>-->
        <div class="early_select early_selectTwo" v-show="flag1">
          <span>中标通知书</span>
          <div class="upLoadImg">
            <upload
              ref="hetongBox4"
              @beforeUpload="beforeUpload"
              @res="getRes($event,4)"
              :accept="'.pdf'"
            />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag2">
          <span>中选/标通知书</span>
          <div class="upLoadImg">
            <upload
              ref="hetongBox5"
              @beforeUpload="beforeUpload"
              @res="getRes($event,5)"
              :accept="'.pdf'"
            />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag3">
          <span>抽取公告</span>
          <div class="upLoadImg">
            <upload
              ref="hetongBox6"
              @beforeUpload="beforeUpload"
              @res="getRes($event,6)"
              :accept="'.pdf'"
            />
          </div>
        </div>
        <div class="early_select early_selectTwo">
          <span>项目经理：</span>
          <!-- <div v-if="radio=='YES'"> -->
            <el-select v-model="managerId" filterable placeholder="--请选择--">
              <el-option
                v-for="item in companyPeopleList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          <!-- </div>
          <div v-else>
            <el-input v-model="manager" placeholder="请输入"></el-input>
          </div> -->
        </div>
        <div class="early_select early_selectTwo">
          <span>技术负责人：</span>
          <!-- <div v-if="radio=='YES'"> -->
            <el-select v-model="technologyId" filterable placeholder="--请选择--">
              <el-option
                v-for="item in companyPeopleList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          <!-- </div>
          <div v-else>
            <el-input v-model="technology" placeholder="请输入"></el-input>
          </div> -->
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">3</div>
      <div class="box_content">
        <div class="early_title">合同信息</div>

        <div class="early_select">
          <span>已签订的合同</span>
          <div class="upLoadImg">
            <upload
              ref="hetongBox7"
              @beforeUpload="beforeUpload"
              @res="getRes($event,7)"
              :accept="'.pdf'"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="btn">
      <el-button
        size="medium"
        type="primary"
        :disabled="noUpload"
        @click="btn_submit"
        :loading="isLoading"
      >提交</el-button>
      <el-button size="medium" @click="getCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { constants } from "crypto";
import { upImg } from "@/api/upImg";
import {
  querySelectionMode,
  queryAllConstructEnterprise,
  saveShishi,
  queryConstructingEnterprise
} from "@/api/implementationChoose";
import { truncate } from "fs";
import upload from "@/components/upload";
export default {
  components: {
    upload
  },
  data() {
    return {
      noUpload: false,
      input1: "",
      options: [],
      value: "G_K_Z_B",
      radio: "",
      flag1: true,
      flag2: true,
      flag3: true,
      isFlag1: false,
      isFlag2: false,

      companyList: [],
      companyValue: "", //诚信管理系统注册公司（是）
      companyName: "",
      inputCompany: "", //诚信管理系统注册公司（否）
      manager: "", //项目经理
      technology: "", //技术负责人

      managerId: "", //项目经理
      technologyId: "", //技术负责人
      companyPeopleList: [], //公司下人员列表

      isLoading: false,
      wenjianObj: {
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      }
    };
  },
  created() {
    this.getWay(); //选取方式
    this.getCompany(); //诚信管理系统注册公司列表
    this.changeValue();
  },
  methods: {
    //上传前
    beforeUpload() {
      this.isLoading = true;
    },
    //上传后
    getRes(res, index) {
      this.wenjianObj["wenjian" + index].fileName = res.data.fileName;
      this.wenjianObj["wenjian" + index].fileUrl = res.data.filePath;
      this.wenjianObj["wenjian" + index].id = res.data.id;
      this.noUpload = false;
      this.isLoading = false;
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    changeRadio() {
      //单选按钮
      if (this.radio == "YES") {
        this.isFlag1 = true;
        this.isFlag2 = false;
      } else if (this.radio == "NO") {
        this.isFlag2 = true;
        this.isFlag1 = false;
      }
    },
    btn_submit() {
      //提交
      const that = this;
      if (that.value == 0) {
        that.$message({
          message: "请选择选取方式",
          type: "warning"
        });
        return;
      }

      let obj = {
        projectId: localStorage.getItem("projectId"),
        selectionMode: that.value,
        contractFileId: that.wenjianObj.wenjian7.id,
        appEnterpriseId:that.companyValue,
        projectManager:that.managerId,
        technicalDirector:that.technologyId
      };
      // if (that.radio == "YES") {
      //   if (that.companyValue == "") {
      //     that.$message({
      //       message: "请选择规划设计与实施方案编制单位名称",
      //       type: "warning"
      //     });
      //     return;
      //   }

      //   if (that.managerId == "") {
      //     that.$message({
      //       message: "请输入项目经理",
      //       type: "warning"
      //     });
      //     return;
      //   }
      //   if (that.managerId == "") {
      //     that.$message({
      //       message: "请输入技术负责人",
      //       type: "warning"
      //     });
      //     return;
      //   }

      //   obj["appEnterpriseId"] = that.companyValue;
      //   // obj['appEnterpriseName']=that.companyName
      //   obj["projectManager"] = that.managerId;
      //   obj["technicalDirector"] = that.technologyId;
      // } else if (that.radio == "NO") {
      //   if (that.inputCompany == "") {
      //     that.$message({
      //       message: "请输入规划设计与实施方案编制单位名称",
      //       type: "warning"
      //     });
      //     return;
      //   }
      //   if (that.manager == "") {
      //     that.$message({
      //       message: "请输入项目经理",
      //       type: "warning"
      //     });
      //     return;
      //   }
      //   if (that.technology == "") {
      //     that.$message({
      //       message: "请输入技术负责人",
      //       type: "warning"
      //     });
      //     return;
      //   }
        // obj["enterpriseName"] = that.inputCompany;
        // let projectManager={
        //   name:that.manager,
        //   num:'',
        //   enterpriseId:''
        // }
        // let technicalDirector={
        //   name:that.technology,
        //   num:'',
        //   enterpriseId:''
        // }
        // obj['projectManagerVo']=projectManager
        // obj['technicalDirectorVo']=technicalDirector
      // }
      if (that.value == "G_K_Z_B") {
        obj["tenderingFileId"] = that.wenjianObj.wenjian1.id;
        obj["winBidFileId"] = that.wenjianObj.wenjian4.id;
      } else if (that.value == "Z_F_C_G") {
        obj["purchaseFileId"] = that.wenjianObj.wenjian2.id;
        obj["winElectionFileId"] = that.wenjianObj.wenjian5.id;
      } else if (that.value == "J_K_S_J_C_Q") {
        obj["extractNoticeFileId"] = that.wenjianObj.wenjian3.id;
        obj["extractResultNoticeFileId"] = that.wenjianObj.wenjian6.id;
      }
      console.log(obj, "obj");

      that.isLoading = true;
      saveShishi(obj).then(res => {
        console.log(res, "re");
        if (res.code == 1000) {
          that.isLoading = false;
          that.$message({
            message: "提交成功",
            type: "success"
          });
          that.getCancel();
        }
      }).catch(error=>{
        that.isLoading = false;
      });
    },

    //查询公司下面的人员
    getCompanyPeople(companyId) {
      var data = {
        organizationId: companyId
      };
      queryConstructingEnterprise(data).then(res => {
        this.companyPeopleList = res.data;
      });
    },
    changeCompany(v) {
      console.log(v, "v");
      this.getCompanyPeople(v);
    },
    getCompany() {
      queryAllConstructEnterprise().then(res => {
        console.log(res, "res");
        this.companyList = res.data;
      });
    },
    getWay() {
      //选取方式
      querySelectionMode().then(res => {
        console.log(res, "res");
        this.options = res.data;
        this.options.unshift({
          value: "0",
          code: "0",
          name: "--请选择--"
        });
      });
    },
    changeValue() {
      this.$nextTick(() => {
        this.$refs.hetongBox7.setValue(1);
      });
      //下拉框值
      console.log(this.value);
      if (this.value == 0) {
        this.flag1 = false;
        this.flag2 = false;
        this.flag3 = false;
        this.getClear();
      } else if (this.value == "G_K_Z_B") {
        this.flag1 = true;
        this.flag2 = false;
        this.flag3 = false;
        this.radio = "";
        this.isFlag1 = false;
        this.isFlag2 = false;
        this.companyValue = "";
        this.inputCompany = "";
        this.manager = "";
        this.technology = "";
        this.$nextTick(() => {
          this.$refs.hetongBox2.setValue(1);
          this.$refs.hetongBox3.setValue(1);
          this.$refs.hetongBox5.setValue(1);
          this.$refs.hetongBox6.setValue(1);
        });
        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == "Z_F_C_G") {
        this.flag2 = true;
        this.flag1 = false;
        this.flag3 = false;
        this.isFlag1 = false;
        this.isFlag2 = false;
        this.radio = "";
        this.companyValue = "";
        this.inputCompany = "";
        this.manager = "";
        this.technology = "";
        this.$nextTick(() => {
          this.$refs.hetongBox1.setValue(1);
          this.$refs.hetongBox3.setValue(1);
          this.$refs.hetongBox4.setValue(1);
          this.$refs.hetongBox6.setValue(1);
        });
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == "J_K_S_J_C_Q") {
        this.flag3 = true;
        this.flag1 = false;
        this.flag2 = false;
        this.radio = "";
        this.companyValue = "";
        this.inputCompany = "";
        this.manager = "";
        this.technology = "";
        this.isFlag1 = false;
        this.isFlag2 = false;
        this.$nextTick(() => {
          this.$refs.hetongBox1.setValue(1);
          this.$refs.hetongBox2.setValue(1);
          this.$refs.hetongBox4.setValue(1);
          this.$refs.hetongBox5.setValue(1);
        });
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      }
    },
    getCancel() {
      //取消
      // this.get_early_select_way()
      this.flag1 = false;
      this.flag2 = false;
      this.flag3 = false;
      this.getClear();
    },
    getClear() {
      this.managerId='';
      this.technologyId=''
      //清空值
      this.$nextTick(() => {
        this.$refs.hetongBox1.setValue(1);
        this.$refs.hetongBox2.setValue(1);
        this.$refs.hetongBox3.setValue(1);
        this.$refs.hetongBox4.setValue(1);
        this.$refs.hetongBox5.setValue(1);
        this.$refs.hetongBox6.setValue(1);
        this.$refs.hetongBox7.setValue(1);
      });
      this.value = "G_K_Z_B";
      this.changeValue()
      this.companyValue = "";
      this.inputCompany = "";
      this.manager = "";
      this.technology = "";
      this.wenjianObj = {
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      };
      this.isLoading = false;
      this.radio = "";
      this.isFlag1 = false;
      this.isFlag2 = false;
    }
  }
};
</script>

<style lang="scss">
.form .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 60px;
  .box_one {
    display: flex;
    .box_list {
      background: #2e8ae6;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 20px;
      color: white;
      margin-top: 8px;
    }

    .box_content {
      margin-left: 20px;

      .early_title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        line-height: 50px;
        margin-bottom: 20px;
      }
      .early_select {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #444;
        font-weight: bold;
        margin-bottom: 25px;
        span {
          margin-right: 20px;
        }
        .upLoadImg {
          display: flex;
          align-items: center;

          .btnUpload {
            width: 90px;
            margin-right: 20px;
          }
        }
      }
    }
  }
  .box_two {
    .box_list {
      opacity: 0.5;
    }
    .box_content {
      .early_selectTwo {
        span {
          width: 100px;
          margin-right: 10px;
        }
      }
    }
  }
  .btn {
    margin-top: 20px;
    margin-left: 80px;
  }
  .lineBlo{
    display: flex;
    align-items: center;
  }
}
</style>
